<template>
  <el-popover placement="bottom" v-model:visible="show" :width="385" trigger="click">
    <!-- 当限制为1时，上传一次文件后必须要刷新才能再次上传,暂时不知道原因，v-if来临时解决 -->
    <el-upload :ref="uploadRef" :limit="limit" accept=".xlsx, .xls" :headers="headers" :action="action"
      :disabled="isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess"
      :auto-upload="false" drag>
      <el-icon class="el-icon--upload">
        <upload-filled />
      </el-icon>
      <div class="el-upload__text">拖拽文件或<em>点击上传</em></div>

      <template #tip>
        <div class="el-upload__tip">.xlsx, .xls文件</div>
      </template>
    </el-upload>
    <el-descriptions :column="1">
      <el-descriptions-item label="导入异常行">
        <el-radio-group v-model="strategy.exceptionStrategy">
          <el-radio :label="0">跳过</el-radio>
          <el-radio :label="1">中断</el-radio>
          <el-radio :label="2">回滚</el-radio>
        </el-radio-group>
      </el-descriptions-item>

      <el-descriptions-item label="数据重复行">
        <el-radio-group v-model="strategy.keyStrategy">
          <el-radio :label="0">跳过</el-radio>
          <el-radio :label="1">中断</el-radio>
          <el-radio :label="2">覆盖</el-radio>
        </el-radio-group>
      </el-descriptions-item>

      <el-descriptions-item label="判断重复列">
        <el-select v-model="strategy.keys" placeholder="请选择数据重复列" multiple clearable>
          <el-option v-for="excelHeader in excelHeaders" :key="excelHeader.name" :label="excelHeader.label"
            :value="excelHeader.name" />
        </el-select>
      </el-descriptions-item>
    </el-descriptions>

    <div style="text-align: center">
      <el-button @click="closeUpload" size="small" plain auto-insert-space>
        取消
      </el-button>
      <el-button @click="submitUpload" type="primary" size="small" plain auto-insert-space>
        确认
      </el-button>
    </div>
    <template #reference>
      <el-button @click="handleUpload" v-loading="uploading" type="info" icon="Upload" size="small" plain
        auto-insert-space>
        上传
      </el-button>
    </template>
  </el-popover>
</template>

<script setup name="UploadExcel">
import { getCurrentInstance, ref } from 'vue'

const props = defineProps({
  show: {
    type: Boolean,
    required: true,
    default: false
  },
  uploadRef: {
    type: String,
    required: false,
    default: 'uploadRef'
  },
  limit: {
    type: Number,
    required: false,
    default: 1
  },
  headers: {
    type: String,
    required: false
  },
  excelHeaders: {
    type: Array,
    default: []
  },
  action: {
    type: String,
    required: true
  },
  strategy: {
    type: Object,
    required: false,
    default: {
      exceptionStrategy: null,
      saveResult: null,
      keys: null,
      keyStrategy: null
    }
  }
})

const isUploading = ref(false)
const uploading = ref(false)

const { proxy } = getCurrentInstance()

const emit = defineEmits()

function handleFileUploadProgress() {
  emit('handleFileUploadProgress', proxy)
}

function handleFileSuccess() {
  emit('handleFileSuccess', proxy)
}

function closeUpload() {
  emit('closeUpload', proxy)
}

function submitUpload() {
  emit('submitUpload', proxy)
}

function handleUpload() {
  emit('handleUpload', proxy)
}
</script>

<style lang="scss" scoped>

</style>
